---
title: Entwicklungswerkzeugleiste
description: Eine Anleitung zur Verwendung der Entwickler-Symbolleiste in Astro
i18nReady: true
---

import RecipeLinks from "~/components/RecipeLinks.astro";

Während der Entwicklungsserver läuft, enthält Astro eine Entwicklungs&shy;symbolleiste am unteren Rand jeder Seite in deiner lokalen Browser-Vorschau.

Diese Werkzeugleiste enthält eine Reihe nützlicher Tools zum Debuggen und Überprüfen deiner Website während der Entwicklung und kann [mit weiteren Entwicklungs&shy;werkzeugleiste-Apps](#erweitern-der-entwicklungswerkzeugleiste) erweitert werden, die du im Verzeichnis integrations findest. Mit der [Entwicklungs&shy;werkzeugleiste-API](/de/reference/dev-toolbar-app-reference/) kannst du sogar [eigene Toolbar-Anwendungen](/de/recipes/making-toolbar-apps/) erstellen!

Diese Symbolleiste ist standardmäßig aktiviert und wird angezeigt, wenn du mit dem Mauszeiger über den unteren Rand der Seite fährst. Sie ist nur für die Entwicklung gedacht und wird nicht auf deiner veröffentlichten Seite angezeigt.

## Eingebaute Apps

### Astro Menü

Die Astro-Menü-App bietet einfachen Zugang zu verschiedenen Informationen über das aktuelle Projekt und Links zu zusätzlichen Ressourcen. Vor allem bietet sie mit einem Klick Zugang zur Astro-Dokumentation, zum GitHub-Repository und zum Discord-Server.

Diese App enthält auch eine Schaltfläche „Debug-Infos kopieren“, die den Befehl [`astro info`](/de/reference/cli-reference/#astro-info) ausführt und die Ausgabe in deine Zwischenablage kopiert. Das kann nützlich sein, wenn du um Hilfe bittest oder Probleme meldest.

### Untersuchung

Die App Inspect liefert Informationen über alle [Inseln](/de/concepts/islands/) auf der aktuellen Seite. Sie zeigt dir die Eigenschaften, die an jede Insel übergeben wurden, und die Client-Direktive, mit der sie gerendert wird.

### Audit

Die Audit-App führt automatisch eine Reihe von Audits auf der aktuellen Seite durch, um die häufigsten Leistungs- und Zugänglichkeits&shy;probleme zu erkennen. Wenn ein Problem gefunden wird, erscheint ein roter Punkt in der Werkzeugleiste. Wenn du auf die App klickst, wird eine Liste mit den Ergebnissen des Audits angezeigt und die entsprechenden Elemente werden direkt auf der Seite markiert.

:::note
Die grundlegenden Leistungs- und Zugänglichkeits&shy;prüfungen, die von der Entwicklungs&shy;werkzeugleiste durchgeführt werden, sind kein Ersatz für spezielle Tools wie [Pa11y](https://pa11y.org/) oder [Lighthouse](https://developers.google.com/web/tools/lighthouse), oder noch besser: für Menschen!

Die Entwicklungs&shy;werkzeugleiste soll eine schnelle und einfache Möglichkeit bieten, häufige Probleme während der Entwicklung zu erkennen, ohne zu einem anderen Tool wechseln zu müssen.
:::

### Einstellungen

In der App „Einstellungen“ kannst du Optionen für die Entwicklungsleiste konfigurieren, wie z. B. die ausführliche Protokollierung, die Deaktivierung von Benachrichtigungen und die Anpassung ihrer Platzierung auf deinem Bildschirm.

## Erweitern der Entwicklungs&shy;werkzeugleiste

Mit den Astro-Integrationen kannst du neue Apps zur Entwicklungs&shy;werkzeugleiste hinzufügen und sie so um benutzerdefinierte Werkzeuge erweitern, die speziell auf dein Projekt zugeschnitten sind. Du findest [weitere Entwicklungswerkzeug-Apps, die du im Verzeichnis der Integrationen installieren kannst](https://astro.build/integrations/?search=&categories%5B%5D=toolbar) oder über das [Astro-Menü](#astro-menü).

Installiere zusätzliche Entwicklungs&shy;werkzeugleiste-App-Integrationen in deinem Projekt wie jede andere [Astro-Integration](/de/guides/integrations-guide/) gemäß der zugehörigen Installationsanleitung.

<RecipeLinks slugs={["de/recipes/making-toolbar-apps"]} />

## Deaktivieren der Entwicklungs&shy;werkzeugleiste

Die Entwicklungs&shy;werkzeugleiste ist standardmäßig für jede Website aktiviert. Du kannst sie bei Bedarf für einzelne Projekte und/oder Nutzer deaktivieren.

### Pro Projekt

Um die Entwicklungs&shy;werkzeugleiste für alle, die an einem Projekt arbeiten, zu deaktivieren, setze `devToolbar: false` in der [Astro-Konfigurationsdatei](/de/reference/configuration-reference/#devtoolbarenabled).

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
});
```

Um die Entwicklungs&shy;werkzeugleiste wieder zu aktivieren, entferne diese Zeilen aus deiner Konfiguration oder setze `enabled: true`.

### Pro Benutzer

Um die Entwicklungs&shy;werkzeugleiste für ein bestimmtes Projekt zu deaktivieren, führe den Befehl [`astro preferences`](/de/reference/cli-reference/#astro-preferences) aus.

```shell
astro preferences disable devToolbar
```

Um die Entwicklungs&shy;werkzeugleiste in allen Astro-Projekten eines Benutzers auf dem aktuellen Rechner zu deaktivieren, füge das `--global` Flag hinzu, wenn du `astro-preferences` ausführst:

```shell
astro preferences disable --global devToolbar
```

Die Entwicklungs&shy;werkzeugleiste kann später mit aktiviert werden:

```shell
astro preferences enable devToolbar
```
